<template>
	<div class="order_catchpdd">

		<div class="team">
			<div class="powertop">
				<router-link class="powertopli" to="/order_catchlinshi/order_catchjd">京东抓单</router-link>
				<router-link class="powertopli powertopact" to="/order_catchlinshi/order_catchpdd">拼多多抓单</router-link>
				<router-link class="powertopli" to="/order_catchlinshi/order_catchyz">有赞抓单</router-link>
				<router-link class="powertopli" to="/order_catchlinshi/order_catchtm">天猫抓单</router-link>
			</div>
			<div class="centerall">
				<div class="t-img">
					<img src="../../../static/img/catchyz.png">
					<!-- <span class="t-48" @click="mlog48 = true">48小时自动发货</span> -->
					<span class="t-email" @click="mobileshow">设置短信报警</span>
				</div>
				<div style="display: flex; margin-bottom: 20px;">
					<div @click="goxin"
						style="border-bottom: 3px #FFFFFF solid; width: 100px; cursor: pointer; font-size: 16px; margin-right: 20px; padding: 20px 0; text-align: center;">
						旧版抓单</div>
					<div
						style="border-bottom: 3px #ff0000 solid; width: 180px; cursor: pointer;  font-size: 16px; padding: 20px 0; text-align: center;">
						新版抓单（自研应用）</div>
				</div>
				<div class="t-con" v-loading="loading">
					<div class="list" style="margin-bottom: 10px; border-left: 1px #EAEAEA solid;">
						<div class="th">店铺名称</div>
						<div class="th">cookie状态</div>
						<div class="th">所属应用</div>
						<div class="th">授权</div>
						<div class="th">授权状态</div>
						<div class="th" style="flex: 2;">操作</div>
					</div>
					<div class="list" v-for="item in list" :key="item.id" style=" border-left: 1px #EAEAEA solid;">
						<div class="td td2">{{item.shop_name}}</div>
						<div class="td td2">
							{{item.stat}}
							<div class="cookiechange" @click="showlog(item.id)"><i class="el-icon-edit"
									style="color: #409eff;"></i></div>

							<!-- <div class="cookiechange" v-if="shopid == 50481 || shopid == 304676"
								@click="showlog2(item.id)" style="margin-left: 20px;">订单解密<i class="el-icon-edit"
									style="color: #409eff;"></i></div> -->
						</div>
						<div class="td td2">
							{{item.client_name}}
						</div>
						<div class="td td2">
							<el-button type="text" size="mini" v-if="item.is_pdd_open != 1" @click="god(item.id)">去配置
							</el-button>
							<el-button type="text" size="mini" v-if="item.is_pdd_open == 1" @click="fixpeizhi(item.id)">
								已配置，修改配置</el-button>
						</div>
						<div class="td td2">
							<span v-if="item.pdd_open_status == 0">
								<el-tooltip placement="top">
								  <div slot="content">
									  授权验证失败通常是以下三种情况：<br/>
									  1、在拼多多的自研应用页面重置了应用ID<br/>
									  2、操作新店铺授权时未退出之前的店铺登录<br/>
									  3、店铺未授权给开放应用，请在应用添加授权<br/>
								   </div>
								  <el-button type="text">失效<i class="el-icon-question"></i></el-button>
								</el-tooltip>
							</span>
							<span v-if="item.pdd_open_status == 1">正常</span>
						</div>
						<div class="td td2" style="flex: 2;">
							<!-- <el-button type="primary" size="mini" v-if="item.is_run == 0 && item.is_login != 2" @click="showlog(item.id)">开始抓单</el-button>

                	        <el-button type="primary" size="mini" v-if="item.is_run == 1" plain @click="showlog(item.id)">抓单中</el-button>
                	        <el-button type="primary" size="mini" v-if="item.is_run == 1" plain @click="stop(item.id)">暂停抓单</el-button>

                          <span style="margin-right: 10px;" v-if="item.cookie != '' && item.is_run == 0 && item.is_login == 2">抓单已暂停</span>
                          <el-button type="primary" size="mini" v-if="item.cookie != ''  && item.is_run == 0 && item.is_login == 2" plain @click="showlog(item.id)">继续抓单</el-button>
                          <el-button type="primary" size="mini" @click="loudanchoose(item.id)">漏单补抓</el-button> -->
						  <div>
							  <span style="margin-right: 10px;" v-if="item.is_run == 1 && item.is_login == 1">抓单已开启</span>
							  <el-button v-if="item.is_run == 0 && item.is_login != 1" type="primary" size="mini"
							  	@click="gocatch(item.id)">开启抓单</el-button>
							  <!-- <el-button v-if="item.is_run == 1 && item.is_login == 1" type="danger" size="mini" @click="stop(item.id)">停止抓单</el-button> -->
							  <el-button type="primary" plain size="mini" @click="loudanchoose(item.id)">漏单补抓</el-button>
						  </div>
						  <div>
						  		<el-button type="primary" plain size="mini" @click="seelogs(item.id,item.shop_name)">查看抓单失败记录
						  		</el-button>
						  		<el-button type="danger" plain size="mini" @click="shanchu(item.id)">删除</el-button>					  
						  </div>
							
							
						</div>
					</div>
					<div style="color: #FF0000; margin-top: 20px;">注意：一个自研应用最多绑定5个店铺</div>
					<div class="addshop">
						<el-button type="primary" size="mini" @click="addshplog = true"><i
								class="el-icon-plus"></i>申请添加店铺</el-button>
					</div>
					<div>还没有申请自研应用？<el-button type="text" size="mini" icon="el-icon-download" @click="xiazailiucheng">
							下载自研应用申请流程</el-button>
					</div>

				</div>
			</div>
		</div>
		<el-dialog title="cookie登录" :visible.sync="log" :close-on-click-modal="false" width="600px">
			<div>
				<el-input type="textarea" placeholder="请输入cookie" v-model="cookies" rows="15"></el-input>
				<!-- :picker-options="timerule" -->

			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取 消</el-button>
				<el-button type="primary" @click="gocookie">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="解密录入" :visible.sync="log2" :close-on-click-modal="false" width="600px">
			<div>
				<el-input type="textarea" placeholder="请输入cookies" v-model="cookies2" rows="8"
					style="margin-bottom: 20px;"></el-input>
				<el-input type="textarea" placeholder="请输入anti-content" v-model="cookies3" rows="8"></el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log2 = false">取 消</el-button>
				<el-button type="primary" @click="gocookie2">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="重新配置" :visible.sync="peizhishow" :close-on-click-modal="false" width="600px">

			<div style="margin-bottom: 20px;">{{peizhiurl}}</div>
			<div style="margin-top: 20px;">复制上面地址在浏览器打开，登录店铺账号后复制生成的授权码，填写在下面输入框</div>
			<div style="margin: 20px 0; color: #DD2727;">注：请确保在浏览器退出拼多多店铺的登录后操作，或者在浏览器按ctrl+shift+n打开无痕模式粘贴地址前往
				（请使用以下浏览器：谷歌Chrome、360系列、搜狗、微软Edge浏览器）</div>
			<div><img src="../../../static/img/pddzhua2.png" style="max-width: 550px; margin-top: 20px;" /></div>
			<div>
				<el-input type="text" placeholder="请输入填写授权码" v-model="peizhicode" style="margin-bottom: 20px;">
				</el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="peizhishow = false">取 消</el-button>
				<el-button type="primary" @click="peizhigo">确 定</el-button>
			</span>
		</el-dialog>

		<el-dialog title="手机号设置" :visible.sync="mlog" :close-on-click-modal="false" width="600px">
			<div>
				<el-input v-model="mobile" placeholder="请输入手机号"></el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="mlog = false">取 消</el-button>
				<el-button type="primary" @click="gomobile">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="48小时自动发货" :visible.sync="mlog48" :close-on-click-modal="false" width="600px">
			<div style="text-align:center;">
				<el-radio v-model="radio" label="1">开启</el-radio>
				<el-radio v-model="radio" label="0">关闭</el-radio>
			</div>
			<div class="says48">
				<div>说明：开启该功能后拼多多订单会在要求的48小时之前的8个小时，在拼多多平台以无需物流的方式自动发货，在您导入正常发货的运单号数据后，
					系统会前往拼多多覆盖原发货信息（自发货后的24小时内可覆盖）。</div>
				<div style="color:#f00">注：该功能仅支持抓单的数据发货，未设置抓单或未登陆，功能无效</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="mlog48 = false">取 消</el-button>
				<el-button type="primary" @click="go48">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="申请添加店铺" :visible.sync="addshplog" :close-on-click-modal="false" width="600px">
			<div style="margin-bottom: 20px;">
				<el-input v-model="addshopname" placeholder="请输入店铺名"></el-input>
			</div>

			<!--            <div>
                <el-input v-model="addshoptoken" placeholder="请输入AccssToken"></el-input>
            </div> -->
			<div style="margin-top:20px; color:#999;">
				注：成功提交后我们将在工作日内48小时配置好，届时可操作抓单。
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="addshaopf">提交申请</el-button>
			</span>
		</el-dialog>
		<el-dialog title="漏单补抓" :visible.sync="loudanlog" :close-on-click-modal="false" @close="clearText"
			width="600px">
			<el-tabs v-model="activeName" type="card">
				<el-tab-pane label="指定单号补抓" name="first">
					<div style="color: #ff253f;">注：请直接从EXCEL复制粘贴，一行一个单号。</div>
					<el-input type="textarea" :rows="10" placeholder="请直接从EXCEL复制粘贴，一行一个单号。" v-model="loudannum">
					</el-input>
				</el-tab-pane>
				<el-tab-pane label="指定时间段补抓" name="second">
					<div style="margin-top: 20px;">抓单开始时间：<el-date-picker v-model="time" :picker-options="pickerOptions"
							value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期时间"></el-date-picker>
					</div>
				</el-tab-pane>
			</el-tabs>
			<div style="margin-top: 20px;">提醒：重新补抓会消耗您店铺的订单解密额度，请确保解密额度充足。<a
					href="https://fuwu.pinduoduo.com/service-market/decrypt" target="_blank">查看解密额度</a></div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="loudanlog = false">取 消</el-button>
				<el-button type="primary" @click="loudan">确 定</el-button>
			</span>
		</el-dialog>
	</div>

</template>

<script>
	import axios from 'axios'
	export default {
		name: "order_catchpdd2",
		data() {
			return {
				peizhishow: false,
				peizhiurl: "",
				peizhiid: "",
				peizhicode: "",
				loudanlog: false,
				loudannum: "",
				chooseid: "",
				loading: true,
				list: "",
				hide: false,
				log: false,
				cookies: "",
				cookies2: "",
				cookies3: "",
				mobile: "",
				mlog: false,
				addshplog: false,
				addshopname: "",
				addshoptoken: "",
				id: "",
				time: "",
				// timerule:{
				//     disabledDate(time) {
				//         var time1 = Date.now() - 3600 * 1000 * 24 * 4
				//         return time.getTime() < time1
				//     },
				// },
				radio: "0",
				mlog48: false,
				log2: false,
				shopid: "",
				activeName: "first",
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6;
					}
				},
				url: ""
			}
		},
		created() {
			this.url = window.location.origin + "/91haoka_platform/"
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
			this.getlist();
		},
		mounted() {

		},
		methods: {
			shanchu: function(id) {

				this.$confirm('删除店铺后将不再同步订单，是否确认删除？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.loading = true
					axios.post('/api/plan-market/out-store/delete', {
							id: id
						})
						.then(response => {
							if (response.data.msg.code == 0) {
								this.getlist()
							} else {
								this.$message.error(response.data.msg.info);
							}
						})
				})

			},
			//修改配置获取link
			fixpeizhi: function(id) {
				this.peizhiid = id
				axios.get('/api/plan-market/shop/pdd-open/get/auth-link?id=' + id)
					.then(response => {
						if (response.data.msg.code == 0) {
							this.peizhiurl = response.data.data.url
							this.peizhishow = true
						} else {
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//确认修改配置
			peizhigo: function() {
				axios.post('/api/plan-market/shop/pdd-open/update/access-token', {
						code: this.peizhicode,
						id: this.peizhiid
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							this.$message({
								message: '已修改',
								type: 'success'
							});
							this.getlist()
							this.peizhishow = false
						} else {
							this.$message.error(response.data.msg.info);
						}
					})
			},
			god: function(id) {
				this.$router.push({
					path: "/order_catchpdd2d",
					query: {
						id: id
					}
				});
			},
			xiazailiucheng: function() {
				const a = document.createElement('a');
				a.setAttribute('download', '自研应用申请流程.docx');
				a.setAttribute('href', this.url + 'static/moban/ziyan.docx');
				a.click();
			},
			goxin: function() {
				this.$router.push({
					path: "/order_catchlinshi/order_catchpdd"
				});
			},
			clearText() {
				this.loudannum = ''
			},
			//开启抓单
			gocatch(id) {
				this.id = id
				axios.post('/api/plan-market/out-store/updaterun', {
						id: this.id
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							this.loading = true
							this.getlist()
						} else {
							this.$message.error(response.data.msg.info);
						}
					})
			},
			// seelogs(id){
			//   this.$router.push({
			//     path: "/order_catch/order_catchpddlogs",
			//     query: { id: id }
			//   });
			// },
			seelogs(id, name) {
				this.$router.push({
					path: "/order_catchlinshi/order_catchpddlogs",
					query: {
						id: id,
						name: encodeURIComponent(name)
					}
				});
			},
			loudanchoose: function(e) {
				this.chooseid = e
				this.loudanlog = true
			},
			loudan: function() {
				var that = this

				//   var list = [this.loudannum]
				//   if(this.loudannum.indexOf('，') > -1){
				//       list = this.loudannum.split('，')
				//   }
				//   if(this.loudannum.indexOf(',') > -1){
				//       list = this.loudannum.split(',')
				//   }

				let duoxuanids2
				duoxuanids2 = this.loudannum.split(/\n/)
				for (let i in this.duoxuanids2) {
					duoxuanids2[i] = duoxuanids2[i].trim()
				}
				let data = {}
				data.id = this.chooseid
				if (this.activeName == 'first') {
					data.orders = duoxuanids2
					data.tag = 1
				} else {
					data.start_time = this.time[0]
					data.end_time = this.time[1]
					data.tag = 2
				}

				axios.post('/api/plan-market/out-store/order/refetch', data)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.$message({
								message: '抓单已提交，请稍后查看。',
								type: 'success'
							});
							that.clearText()
							that.loudanlog = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//申请店铺
			addshaopf: function() {
				this.addshopname = this.addshopname.trim()
				this.addshoptoken = this.addshoptoken.trim()
				// if(!this.addshopname || !this.addshoptoken){
				//   this.$message.error('请填写店铺名和AccssToken')
				//   return
				// }
				var that = this
				axios.post('/api/plan-market/out-store/add', {
						name: this.addshopname,
						source: "pdd",
						access_token: this.addshoptoken
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.$message({
								message: '申请已发送，我们将在48小时内处理。',
								type: 'success'
							});
							that.addshplog = false
							that.addshopname = ""
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//48小时发货确认
			go48: function() {
				var that = this
				axios.post('/api/plan-market/out-store/auto_deliver', {
						auto_deliver: that.radio
					})
					.then(response => {
						if (response.data.msg.code == 0) {

							if (that.radio == '0') {
								that.$message({
									message: '自动发货关闭！',
									type: 'success'
								});
							} else {
								that.$message({
									message: '自动发货开启！',
									type: 'success'
								});
							}
							that.mlog48 = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//获取手机号
			mobileshow: function() {
				var that = this
				axios.get('/api/plan-market/out-store/one?id=' + this.mobileid)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.mobile = response.data.data.mobile
							that.mlog = true
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//停止抓单
			stop: function(id) {
				var that = this
				axios.post('/api/plan-market/out-store/stop/fetch', {
						id: id
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.$message.success('已停止抓单！');
							that.loading = true
							that.getlist()
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//点击登录和重复登录
			showlog: function(id) {
				this.id = id
				this.log = true
				var that = this
				axios.get('/api/plan-market/out-store/one?id=' + id)
					.then(response => {
						if (response.data.msg.code == 0) {
							that.cookies = response.data.data.cookie
							that.time = [response.data.data.fetch_start_at, response.data.data.fetch_end_at]
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			showlog2: function(id) {
				this.id = id
				this.log2 = true
			},

			//设置手机号
			gomobile: function() {
				var that = this
				axios.post('/api/plan-market/out-store/update', {
						source: 'pdd',
						mobile: this.mobile
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.$message({
								message: '手机号设置成功',
								type: 'success'
							});
							that.mlog = false
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},

			//cookie登录
			gocookie: function() {
				this.cookies = this.cookies.trim()
				if (this.cookies == "") {
					this.$message('请填写cookie！');
					return false
				}
				// if(this.time == "" || this.time == undefined){
				//     this.$message('请选择抓单时间！');
				//     return false
				// }
				var that = this
				axios.post('/api/plan-market/out-store/update', {
						id: this.id,
						cookie: this.cookies
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.loading = true
							that.log = false
							that.getlist()
						} else {
							that.$message.error(response.data.msg.info);
						}
					})

			},
			gocookie2: function() {
				var that = this
				axios.post('/api/plan-market/out-store/update', {
						id: this.id,
						apply_cookie: this.cookies2,
						apply_anti: this.cookies3
					})
					.then(response => {
						if (response.data.msg.code == 0) {
							that.loading = true
							that.log2 = false
							that.getlist()
						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//获取号码
			getlist: function() {
				var that = this
				axios.get('/api/gth/out-store/list?source=pdd')
					.then(response => {
						if (response.data.msg.code == 0) {
							if (response.data.data != '') {
								for (var i in response.data.data) {
									if (response.data.data[i].is_cookie === 0) {
										response.data.data[i].stat = "不可用，请重新录入";
									}
									if (response.data.data[i].is_cookie === 1) {
										response.data.data[i].stat = "可用";
									}
								}
								that.list = response.data.data
								that.mobileid = response.data.data[0].id
								that.loading = false
							} else {
								that.loading = false
							}

						} else {
							that.$message.error(response.data.msg.info);
						}
					})
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.getlist()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.order_catchpdd {
		.says48 {
			line-height: 25px;
			padding: 20px 0;
		}

		.team {
			background: #EAEAEA;

			.powertop {
				display: flex;
				width: 640px;
			}

			.powertopli {
				flex-basis: 160px;
				line-height: 45px;
				border-top: 4px #EAEAEA solid;
				color: #727272;
				font-size: 14px;
				text-align: center;
			}

			.powertopact {
				background: #FFFFFF;
				border-top: 4px #DD2727 solid;
			}

			.centerall {
				padding: 20px;
				background: #FFFFFF;
				color: #666;

				.t-img {
					margin-bottom: 20px;
					position: relative;

					img {
						width: 100%;
					}

					.t-email {
						position: absolute;
						background: #FFFFFF;
						color: #DD2727;
						font-size: 14px;
						right: 20px;
						padding: 5px 10px;
						top: 26px;
						cursor: pointer;
					}

					.t-48 {
						position: absolute;
						background: #FFFFFF;
						color: #DD2727;
						font-size: 14px;
						right: 160px;
						padding: 5px 10px;
						top: 26px;
						cursor: pointer;
					}
				}

				.t-con {
					.list {
						display: flex;
						text-align: center;
						color: #727272;
						line-height: 45px;
						border-top: 1px #EAEAEA solid;
						border-bottom: 1px #EAEAEA solid;
						margin-top: -1px;

						.th {
							flex: 1;
							background: #F9F9F9;
							font-size: 14px;
							border-right: 1px #EAEAEA solid;
						}

						.td {
							flex: 1;
							font-size: 14px;
							border-right: 1px #EAEAEA solid;
						}

						.td2 {
							display: flex;
							justify-content: center;
							align-items: center;
							flex-wrap: wrap;
						}

						.el-button--danger {
							padding: 7px 15px !important;
						}
					}

					.el-pagination {
						text-align: right;
						margin: 20px 0
					}

					.addshop {
						text-align: center;
						padding: 20px 0;
					}
				}

				.getcookie {
					background: #F8F8F8;
					padding: 20px;
					line-height: 30px;
					margin-top: 40px;
					border: 1px #e6e6e6 solid;

					.getflex {
						display: flex;
						justify-content: space-between;
						width: 750px;
						margin: 0 auto;
						margin-top: 50px;

						.getxian {
							height: 25px;
							border-bottom: 1px #D5D5D5 solid;
							flex-basis: 280px;
						}

						.getflexli {
							flex-basis: 50px;
							text-align: center;
							z-index: 2;

							.getflexlix {
								background: #D5D5D5;
								line-height: 50px;
								border-radius: 25px;
								width: 50px;
							}
						}
					}

					.getflex2 {
						display: flex;
						justify-content: space-between;
						width: 950px;
						margin: 20px auto;

						.getflexli2 {
							width: 240px;
							text-align: center;

							.getflexli2title {
								font-size: 16px;
							}

							.getflexli2content {
								font-size: 14px;
							}
						}
					}

					.blue a {
						color: #409EFF;
						cursor: pointer
					}
				}
			}
		}

		.cookiechange {
			margin-left: 5px;
			cursor: pointer;
		}

	}
</style>
